<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
 /*
普通函数中的this:
1. this总是代表它的直接调用者,
例如 obj.func ,那么func中的this就是obj

2.在默认情况(非严格模式下,未使用 'use strict'),
没找到直接调用者,则this指的是 window

3.在严格模式下,没有直接调用者的函数中的this是 undefined

4.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象


箭头函数中的this
默认指向在定义它时,它所处的对象,而不是执行时的对象,
定义它的时候,可能环境是window（即继承父级的this）;
     */
</script>
<script demo="1">

    var obj = {
        say: function () {
            setTimeout(function () {
                console.log(this)
            });
        }
    }
    obj.say();
</script>

<script demo="2">



    window.val = 1
    var obj={
        val:2,
        dbl:function(){
            this.val *= 2;
            val *= 2;
            console.log("demo2-val："+val);
            console.log("demo2-this.val："+this.val);
        }
    }

    obj.dbl();//2 4
    var func = obj.dbl;
    func();//8 8

    //val变量在没有指定对象前缀,默认从函数中找,
    // 找不到则从window中找全局变量
    //即 val *=2 就是 window.val *= 2
    //this.val默认指的是 obj.val ;因为 dbl()第一次被obj直接调用
    //func() 没有任何前缀,类似于全局函数,即  window.func调用,所以
    //第二次调用的时候, this指的是window, val指的是window.val
    //第二次的结果受第一次的影响
</script>


<script demo="3">
    //在严格模式下的this
    function test(){
        'use strict'
        console.log("demo3-this: "+this);
    }
    test();//undefined
</script>


<script demo="4">
//箭头函数中的this
var obj = {
    say:function(){
        setTimeout(()=>{
            console.log(this);
        })
    }
}
obj.say();//obj
//此时的this是定义它的对象，即继承父级的this,父级中的this指的是obj,而非window

var obj = {
    say: function () {
        var f1 = () => {
            console.log(this); // obj
            setTimeout(() => {
                console.log(this); // obj
            })
        }
        f1();
    }
}
obj.say();
//f1继承父级this指代的obj，不管f1有多层箭头函数嵌套，都是obj.

</script>



<script demo="4">

    var obj = {
        say: function () {
            var f1 = function () {
                console.log(this);    // window, f1调用时,没有宿主对象,默认是window
                setTimeout(() => {
                    console.log(this); // window
                })
            };
            f1();
        }
    }
    obj.say()
    //window,window
    //第一个this：f1调用时没有宿主对象，默认是window
    //第二个this:继承父级的this,父级的this指代的是window.
</script>

<script demo="5">

</script>
</html>